:popover-open {
    position: static;
    width: auto;
    height: auto;
    color: inherit;
    background-color: transparent;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    pointer-events: none;

}


#resist, #mask {
    pointer-events: none;
    left: 0px;
    top: 0px;
    z-index: 9999999999;
}

#mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

#resist {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

#wrapper {
    --label-scale: 1;
    z-index: 9999999999;
    position: fixed;
    top: 100px;
    left: 100px;
    background-color: black; 
    color: white; 
    border: 2px solid #aaa;
    width: 300px;
    font-size: 14px;
    font-family: "Segoe UI", "Avenir", system-ui, Courier, monospace;
    user-select: none;
    opacity: 0.8;
    pointer-events: all;

    &:hover {
        opacity: 1;
    }

    &.hidden {
        width: revert;
        font-size: 16px;
    }    


    button, input, label {
        &:focus {
            outline: 1px solid yellow; 
        }
        
        &:hover {
            cursor: pointer;
            background-color: #555;
        }
    }

    input[type="color"] {
        position: absolute;
        pointer-events: none;
        opacity: 0;
        width: 0px;
        height: 0px;
    }
    
    .selected {
        outline: 1px solid #9fe;

        &:focus {
            outline: 1px solid #9fe;
        }
    }

    button, label {
        padding: 1px 6px;
        background-color: inherit;
        border: 1px solid #555;
        color: white;
        & * {
            pointer-events: none;
        }
        & > *:nth-child(1n+2) {
            margin-left: 5px;
        }
    }

    button {
        font-size: inherit;
    }

    .iconButton {
        border: none;
        padding: 0px 3px;
        font-size: 1.3em;
        line-height: 0;
        border-radius: 3px;
    }
    
    &.hidden {
        #header {
            grid-template-columns: max-content repeat(3, max-content);

            #headerLabel, #help, #clear {
                display: none;
            }

            & > svg:first-child {
                margin-right: 30px;
            }
        }
    }

    #header {
        display: grid;
        grid-template-columns: max-content 1fr repeat(4, max-content);
        border-bottom: 1px solid #aaa;
        padding: 5px;
        align-items: center;
        cursor: move;
        

        & > svg:first-child {
            margin-right: 5px;
        }

        & > svg, #headerLabel {
            pointer-events: none;
        }
    }

    #main {
        padding: 5px;
    }

    &.hidden {
        #main {
            display: none; 
        }
    }

    #mode {
        --mode-font-scalar: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        font-size: calc(1em * var(--mode-font-scalar));
        align-items: center;
        column-gap: 5px;
    }

    #color {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        align-items: center;
        column-gap: 5px;
        row-gap: 5px;

        & > label {
            text-align: center;
        }
    }

    #color, #mode, #brushSize, #eraserSize {
        & > span:first-child {
            width: calc(45px * var(--label-scale));
        }
    }

    #main > *:nth-child(1n+2) {
        margin-top: 5px;
    }


    #brushSize, #eraserSize {
        display: grid;
        grid-template-columns: max-content 1fr;
        align-items: center;
    }

    & > .color {
        color: black;
        text-shadow: 1px 1px 2px white;
        width: 30px;
        
    }
    & > button, & > label {
        border: 1px solid #555;

        &.selected {
            outline: 1px solid yellow; 
        }
    }
    
    & > #custom {
        background: linear-gradient(to bottom right, red, yellow);
        color: black;
        text-shadow: 1px 1px 2px white;
    }
}